<template>
  <div class="result">
    <van-nav-bar left-arrow class="vanBar">
      <template #title>
        <div class="title">搜索结果页</div>
      </template>
      <template #left
        ><i class="iconfont" @click="backSearch">&#xe755;</i></template
      >
    </van-nav-bar>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 渲染搜索结果 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="info"
          v-for="(item, index) in infoList"
          :key="index"
          @click="toDetial(item.art_id)"
        >
          <div class="title">
            {{ item.title }}
          </div>
          <!-- 放置图片,图片地址有问题 -->
          <div v-if="item.cover.type > 0">
            <div
              class="img"
              v-for="(item2, index2) in item.cover.images"
              :key="index2"
            >
              <img :src="item2" alt="" />
              <!-- <img src="@/assets/logo.png" alt="" /> -->
            </div>
          </div>

          <div class="infoCenter">
            <span class="autName">{{ item.aut_name }}</span>
            <span class="comm"
              ><i class="comm-num">{{ item.comm_count }}</i> 评论</span
            >
            <span class="comm-date">{{ item.pubdate | dateFormat }}</span>
          </div>
          <div class="infobtm">
            <div><i class="iconfont">&#xe7b3;</i>{{ item.comm_count }}</div>
            <div class="centerBox">
              <i class="iconfont"
                ><img
                  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200223%2F87e07bf24e184870859ac398a34ad213.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612254797&t=8d5bab649a4c586d8a3536812e3c8cf2"
                  alt=""/></i
              ><span class="text">{{ item.like_count }}点赞</span>
            </div>
            <div>
              <i class="iconfont"><van-icon name="share-o"/></i>分享
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { dateFormat } from '@/filters/filters.js'
import { appV10Search } from '@/api/search.js'
export default {
  name: 'SearchResult',
  data () {
    return {
      searchVal: this.$route.query.val, // 接收路由传过来的搜索内容，先自定义
      infoList: [], // 存储搜索结果的数据
      loading: false, // 是否处于上拉加载中
      finished: false, // 是否加载完毕
      page: 1, // 当前页数
      per_page: 2, // 每页的数量
      refreshing: false
    }
  },
  filters: {
    dateFormat
  },
  async created () {
    // const res = await appV10Search({ q: this.searchVal })
    // console.log(res)
    // this.infoList = res.data.results
    // console.log(this.infoList)
  },
  methods: {
    // 跳转回搜索页
    backSearch () {
      this.$router.push('/home/search')
    },
    // 跳转列表详情页
    toDetial (id) {
      this.$router.push('/home/detail?id=' + id)
    },
    //
    async onLoad () {
      console.log('onLoad')
      const res = await appV10Search({
        q: this.searchVal,
        page: this.page
      })
      console.log(res)
      // this.infoList = res.data.results
      this.infoList.push(...res.data.results)
      //
      this.page++
      this.loading = false
      // 判断是否加载完毕，对比两个数组的长度
      if (this.infoList.length >= res.data.total_count) {
        this.finished = true
      }
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
      this.refreshing = true
    }
  }
}
</script>

<style lang="less" scoped>
.result {
  .van-nav-bar {
    background: @color-bg;
    .title {
      color: #fff;
    }
    .iconfont {
      color: #fff;
      font-size: 30px;
    }
  }
  .info {
    padding: 0px 15px;
    font-size: 16px;
    .title {
      padding: 30px 0px;
      font-weight: 600;
    }
    .img img {
      width: 50px;
      height: 50px;
    }
    .infoCenter {
      padding: 5px 0px;
      font-size: 14px;
      .autName,
      .comm,
      .comm-date {
        margin-right: 10px;
      }
    }
    .infobtm {
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      text-align: center;
      border-top: 1px solid #f5f6f7;
      border-bottom: 1px solid #f5f6f7;
      // background-color: pink;
      display: flex;
      justify-content: space-around;
      i.iconfont {
        font-size: 24px;
        padding-right: 10px;
      }
      .centerBox {
        i {
          img {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-top: 10px;
          }
        }
        .text {
          position: relative;
          top: -10px;
        }
      }
    }
  }
}
</style>
